<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <!--  body  -->
    <div class="description">
      <div class="prompt-message">行标签:</div>
      <a-select
        v-model="rows"
        mode="multiple"
        placeholder="请选择"
        style="width: 100%;"
      >
        <a-select-option
          v-for="(row, index) in allInput"
          :key="'row' + index"
          :disabled="cols.includes(row)"
          :value="row"
        >
          {{ row }}
        </a-select-option>
      </a-select>
      <div class="prompt-message">列标签:</div>
      <a-select
        v-model="cols"
        mode="multiple"
        placeholder="请选择"
        style="width: 100%;"
      >
        <a-select-option
          v-for="(col, index) in allInput"
          :key="'col' + index"
          :disabled="rows.includes(col)"
          :value="col"
        >
          {{ col }}
        </a-select-option></a-select
      >
      <div class="prompt-message">输出值:</div>
      <div v-if="selectNode.data.input.length > 0">
        <div class="ranks-filter-group">
          <!-- group box -->
          <div class="group-box">
            <div class="group-box-center">
              <div
                v-for="(item, idx) in statistics"
                :key="'item' + idx"
                class="filter-item"
              >
                <!--  item box -->
                <div class="filter-item-box">
                  <a-select
                    v-model="item.method"
                    class="filter-select"
                    size="small"
                    style="width: 120px;"
                    @change="(value) => selectMethod(value, idx)"
                  >
                    <a-select-option
                      v-for="group in pivotTableMethod"
                      :key="group.method"
                      :value="group.method"
                    >
                      <a-tooltip>
                        <template slot="title"> {{ group.name }} </template>
                        {{ group.name }}
                      </a-tooltip>
                    </a-select-option>
                  </a-select>
                  <div style="margin-right: 4px;">——</div>
                  <a-select
                    v-model="item.col"
                    class="filter-select"
                    size="small"
                    style="width: 120px;"
                  >
                    <template v-if="item.method === ''"></template>
                    <template v-else-if="item.method === 'count'">
                      <a-select-option
                        v-for="(col, index) in allInput"
                        :key="'cols' + index"
                        :value="col"
                      >
                        <a-tooltip>
                          <template slot="title"> {{ col }} </template>
                          {{ col }}
                        </a-tooltip></a-select-option
                      >
                    </template>
                    <template v-else>
                      <a-select-option
                        v-for="(col, index) in numInput"
                        :key="'cols' + index"
                        :value="col"
                      >
                        <a-tooltip>
                          <template slot="title"> {{ col }} </template>
                          {{ col }}
                        </a-tooltip></a-select-option
                      >
                    </template>
                  </a-select>
                  <div class="group-box-right">
                    <a-icon-font
                      type="iconicon-beifen5"
                      @click="deleteFilterGroup(idx)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="add-line-filter" @click="addFilterGroup">
          <a-icon type="plus" />
          添加输出值
        </div>
      </div>
      <div v-if="selectNode.data.input.length === 0" class="no-father-node">
        -- 请先添加父节点 --
      </div>
      <div class="prompt-message">新生成表最大列数:</div>
      <a-input-number
        v-model="colSize"
        :max="1600"
        :min="rows.length + 1"
      ></a-input-number>
    </div>
    <!--  footer  -->
    <div class="footer-buttons">
      <div class="btn import-btn" @click="confirm">确定</div>
      <div class="btn cancel-btn" @click="cancelChange">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import DataViewStore from '@/store/modules/dataview'
import { cloneDeep } from 'lodash'
import { Watch } from 'vue-property-decorator'
import { queryPivotTableMethod } from '@/api/pipeline'

interface StatisticsItem {
  col: string
  method: string
  name: string
}

@Component
export default class EtlPivotTable extends Vue {
  private colSize: number = 50
  private get selectNode() {
    return DataViewStore.selectNode
  }
  private rows: any = []
  private cols: any = []
  private statistics: any = [
    {
      col: '',
      method: '',
      name: '',
    },
  ]
  private pivotTableMethod: any = []
  private allInput: any = []
  private numInput: any = []

  // 监听激活的节点
  @Watch('selectNode', { deep: true })
  private changeSelectNode(selectNode: any) {
    if (selectNode) {
      this.initSet()
    }
  }

  public async beforeCreate() {
    const result = await queryPivotTableMethod()
    this.pivotTableMethod = result.data.result
  }

  public created() {
    // 配置回显
    this.initSet()
  }

  public initSet() {
    this.allInput = cloneDeep(this.selectNode.data.input[0].tableCols)
    const index = this.allInput.indexOf('_record_id_')
    if (index > -1) {
      this.allInput.splice(index, 1)
    }
    this.numInput = []
    this.selectNode.data.input[0].columnTypes.forEach((type: any, idx: any) => {
      if (type === 'NUMERIC' || type === 'BIGINT') {
        this.numInput.push(this.allInput[idx])
      }
    })

    // 配置回显
    if (
      this.selectNode.data.statistics === undefined ||
      this.selectNode.data.statistics.length === 0
    ) {
      this.statistics = [
        {
          col: '',
          method: '',
          name: '',
        },
      ]
      this.rows = []
      this.cols = []
      this.colSize = 50
    } else {
      this.statistics = cloneDeep(this.selectNode.data.statistics)
      this.rows = cloneDeep(this.selectNode.data.rows)
      this.cols = cloneDeep(this.selectNode.data.cols)
      this.colSize = cloneDeep(this.selectNode.data.colSize)
    }
  }

  /**
   * 添加 输出值 组
   */
  public addFilterGroup() {
    const group: StatisticsItem = {
      col: '',
      method: '',
      name: '',
    }

    this.$set(this.statistics, this.statistics.length, group)
  }

  /**
   * 删除 输出值 组
   */
  public deleteFilterGroup(index: number) {
    if (this.statistics.length === 1) {
      const group: StatisticsItem = {
        col: '',
        method: '',
        name: '',
      }

      this.$set(this.statistics, 0, group)
    } else {
      this.statistics.splice(index, 1)
    }
  }

  /**
   * 修改方法
   */
  public selectMethod(value: any, idx: any) {
    this.pivotTableMethod.forEach((item: any) => {
      if (item.method === value) {
        this.statistics[idx].name = item.name
      }
    })
  }

  public confirm() {
    let status = true
    this.statistics.forEach((item: StatisticsItem) => {
      if (item.col === '' || item.method === '') {
        status = false
      }
    })
    if (this.rows.length === 0 || this.cols.length === 0) {
      this.$message.warning('请检查行列标签！')
      return
    }
    if (status) {
      this.$emit('confirm', {
        algType: '7',
        rows: this.rows,
        cols: this.cols,
        statistics: this.statistics,
        colSize: this.colSize,
      })
    } else {
      this.$message.warning('请检查输出值条件！')
    }
  }

  /**
   * 取消修改
   */
  public cancelChange() {
    this.initSet()
    this.$emit('cancel')
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';

.prompt-message {
  color: #5d637e;
  letter-spacing: 0.86px;
  margin-bottom: 6px;

  &:not(:first-child) {
    margin-top: 6px;
  }
}

/* 输出值 外层组 包含逻辑符号 */
.ranks-filter-group {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  width: 100%;

  /* 内层组 同 ranks-filter-group */
  .group-box {
    align-items: center;
    border: 1px solid #e9e9e9;
    border-bottom: 0;
    display: flex;
    padding: 0 5px;
    width: 100%;

    /* 内层 逻辑符号 或 */
    .group-box-left {
      margin-right: 6px;
      text-align: center;
      width: 14px;
    }

    /* 中间条件 select select input */
    .group-box-center {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: calc(100% - 40px);

      /* 每一条 条件 */
      .filter-item {
        width: 100%;

        .filter-item-box {
          align-items: center;
          display: flex;
          margin: 4px 0;
          width: 100%;

          /* 下拉选择 */
          .filter-select {
            flex-shrink: 0;
            height: 24px;
            margin-right: 4px;
            width: calc(33% - 13px);
          }

          /* 输入框 */
          .filter-input-box {
            flex-shrink: 0;
            height: 24px;
            margin-right: 4px;
            width: calc(33% - 18px);

            .filter-input {
              width: 100%;
            }
          }

          /* 添加删除 按钮 */
          .add-delete-icon {
            margin-left: 6px;
          }
        }
      }
    }

    /* 删除组按钮 */
    .group-box-right {
      align-items: center;
      display: flex;
      margin-left: 6px;
      width: 14px;
    }
  }

  input {
    background-color: transparent;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    margin-right: 5px;
    outline: none;
    width: 25%;
  }
}

/* 添加输出值 */
.add-line-filter {
  border: 1px solid #e9e9e9;
  color: #6973ff;
  cursor: pointer;
  height: 32px;
  line-height: 32px;
  text-align: center;
  user-select: none;
  width: 100%;
}
</style>
